<!DOCTYPE html>
<html lang='zh-CN'>

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--=============== CSS ===============-->
  <link th:href="@{/css/style.css}" rel="stylesheet">
  <title>Nginx Test Page</title>
</head>

<body>
<div class="web-info">
  <h1>Web Server Information</h1>
  <ul>
    <li><strong>IP Address:</strong> <span th:text="${serverInfo}"></span></span></li>
    <li><strong>Version:</strong> <span th:text="${systemVersion}"></span></span></li>
    <li><strong>Current Time:</strong> </span> <span id="current-time"></span></li>
  </ul>
</div>


<div class="container">
  <div class="clock">
    <div class="clock__circle">
      <div class="clock__rounder"></div>
      <div class="clock__hour" id="clock-hour"></div>
      <div class="clock__minutes" id="clock-minutes"></div>
    </div>

    <div>
      <div class="clock__date">
        <span class="clock__day-week" id="date-day-week"></span>

        <div>
          <span class="clock__month" id="date-month"></span>
          <span class="clock__day" id="date-day"></span>
          <span class="clock__year" id="date-year"></span>
        </div>
      </div>

      <div class="clock__text">
        <span class="clock__text-hour" id="text-hour"></span>
        <span class="clock__text-minutes" id="text-minutes"></span>
        <span class="clock__text-minutes" id="text-seconds"></span>
        <span class="clock__text-ampm" id="text-ampm"></span>

      </div>
    </div>
  </div>
</div>

<!--=============== MAIN JS ===============-->
<script th:src="@{/js/script.js}"></script>


<script>
  // // 获取并显示IP地址
  // fetch('https://api.ipify.org?format=json')
  //         .then(response => response.json())
  //         .then(data => {
  //           document.getElementById('ip-address').textContent = data.ip;
  //         })
  //         .catch(error => {
  //           console.log('Error:', error);
  //         });

  // // 获取并显示主机名称
  // document.getElementById('hostname').textContent = window.location.hostname;

  // // 获取并显示当前时间
  // var currentTime = new Date().toLocaleString();
  // document.getElementById('current-time').textContent = currentTime;
  function updateCurrentTime() {
    var currentTime = new Date().toLocaleString();
    document.getElementById('current-time').textContent = currentTime;
  }

  // 初始化时间显示
  updateCurrentTime();

  // 每隔1秒（1000毫秒）更新一次时间
  setInterval(updateCurrentTime, 1000);


</script>
</body>

</html>